<!--
 * @author liganghao
 -->
<template>
  <div id="addUser">
    <el-row type="flex" justify="space-around">
      <el-col :span="4">
        <qy-tree ref="qyTree" @breadLists="breadLists" @clickTreeData="clickTreeData" />
      </el-col>
      <el-col :span="16">
        <div class="tablewrap" style="height: 100%; overflow-y:auto;">
          <div class="search-inner">
            <el-row>
              <!--<el-col :span="6">
                <div class="search-inner-item">
                  <div class="item-label">用户名称</div>
                  <el-input
                    v-model.trim="search.userName"
                    style="width: 90%;"
                    class="filter-item"
                    placeholder="请输入用户名搜索"
                  />
                </div>
              </el-col>-->
              <el-col :span="6">
                <div class="search-inner-item">
                  <div class="item-label">真实姓名</div>
                  <el-input
                    v-model.trim="search.userRealname"
                    style="width: 90%;"
                    class="filter-item"
                    placeholder="请输入真实姓名搜索"
                  />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="search-inner-item">
                  <div class="item-label">联系电话</div>
                  <el-input
                    v-model.trim="search.phoneNumber"
                    style="width: 90%;"
                    class="filter-item"
                    placeholder="请输入联系电话搜索"
                  />
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px;">
                <div class="search-inner-item">
                  <div class="item-label">&nbsp;</div>
                  <el-button v-waves class="search-btn" @click="resetting">重置</el-button>
                  <el-button
                    v-waves
                    style="margin-right: 10px"
                    class="search-btn"
                    type="primary"
                    @click="handleFilter"
                  >搜索</el-button>
                </div>
              </el-col>
            </el-row>
            <span v-if="breadList.length > 0" class="span">当前选择：</span>
            <span
              v-if="breadList.length"
              class="btn-container-title-select"
              :title="breadList.join('>')"
            >{{ breadList.join('>') }}</span>
          </div>
          <el-table
            ref="rolemantable"
            v-loading="dialogListLoading"
            :header-cell-style="rowClass"
            :data="dialogList"
            class="tableScope"
            height="310"
            width="100%"
            :row-key="getRowKeys"
            @selection-change="dialogHandleSelectionChange"
          >
            <el-table-column type="selection" width="55" :reserve-selection="true" />
            <!--<el-table-column prop="userName" label="用户名称" show-overflow-tooltip width="250" />-->
            <el-table-column prop="userRealname" label="真实姓名" show-overflow-tooltip />
            <el-table-column prop="jieMphoneNumber" label="联系电话" show-overflow-tooltip />
            <el-table-column prop="orgAllName" label="所属组织" show-overflow-tooltip />
          </el-table>
          <div class="btn-pagion fix">
            <pagination
              :total="dialogTotal"
              :page.sync="dialogListQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getDialogList"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <p>已选择人员：</p>
        <ul class="selectUser">
          <li v-for="(item, index) in dialogMultipleSelection" :key="index">{{ item.userRealname }}</li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryUserRole } from '@/views/organmanage/api/index'
import CryptoJS from '@/utils/aesJiaJM'
import QyTree from './qytree'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves' // Waves directive

export default {
  name: 'Setadmin',
  components: { QyTree, Pagination },
  directives: { waves },
  props: {
    userList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogListLoading: false,
      dialogTotal: 0,
      dialogMultipleSelection: [],
      search: {
        userName: '',
        userRealname: '',
        phoneNumber: '',
        companyName: ''
      },
      breadList: [],
      dialogList: [],
      dialogListQuery: {
        page: 1,
        limit: 10
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      curNodeOrgIdOrDeptId: {
        orgId: '',
        deptId: ''
      }
    }
  },
  created() {
    this.dialogMultipleSelection = this.userList
    this.getDialogList()
  },
  methods: {
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    clickTreeData(data) {
      this.curNodeOrgIdOrDeptId.orgId = data.orgId
      this.curNodeOrgIdOrDeptId.deptId = data.deptId
      this.getDialogList()
    },
    /**
     * 当前选择组织
     *  */
    breadLists(data) {
      this.breadList = data
    },
    /*
      * 搜索添加用户列表
      */
    handleFilter() {
      this.getDialogList()
    },
    /*
      * 重置人员列表
      * */
    resetting() {
      this.dialogListQuery.page = 1
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.getDialogList()
    },
    // 重置所有
    resettingall() {
      this.resetting()
      this.$nextTick(() => {
        this.$refs.qyTree.clearSearchTree()
      })
    },
    // 清空选择
    emptySelect() {
      this.$refs.rolemantable.clearSelection()
    },
    getRowKeys(row) {
      return row.id
    },
    dialogHandleSelectionChange(arr) {
      arr.forEach(item => {
        if (!this.dialogMultipleSelection.find(ite => { return ite.id === item.id })) {
          this.dialogMultipleSelection.push(item)
        }
      })
      this.$emit('userData', this.dialogMultipleSelection)
    },
    getDialogList(obj) {
      this.dialogListLoading = true
      var query = {
        page: obj ? obj.page : this.dialogListQuery.page,
        pageSize: obj ? obj.limit : this.dialogListQuery.limit,
        orgId: this.curNodeOrgIdOrDeptId.orgId || '',
        deptId: this.curNodeOrgIdOrDeptId.deptId || '',
        userName: this.search.userName,
        userRealname: this.search.userRealname,
        phoneNumber: this.search.phoneNumber,
        adminFlag: 'YHBS02'
      }
      return new Promise((resolve, reject) => {
        queryUserRole(query).then(response => {
          this.dialogList = response.data.data.rows
          this.dialogList.forEach(element => {
            if (element.phoneNumber) {
              element.jieMphoneNumber = CryptoJS.$aesJieM(element.phoneNumber)
            }
            this.userList.forEach(row => {
              if (element.id === row.id) {
                this.$refs.rolemantable.toggleRowSelection(element)
              }
            })
          })
          this.dialogTotal = response.data.data.total
          this.dialogListLoading = false
        }).catch(error => {
          reject(error)
          this.dialogListLoading = false
        })
      })
    },
    insertUser() {
      if (this.dialogMultipleSelection.length > 0) {
        var arr = []
        this.dialogMultipleSelection.forEach(item => {
          arr.push(item.id)
        })
        var ids = arr.join(',')
        this.dialogListLoading = true
        return new Promise((resolve, reject) => {
          // eslint-disable-next-line no-undef
          insertRoleUser(this.roleId, ids).then(() => {
            this.dialogListLoading = false
            this.$message({
              message: '添加用户成功！',
              type: 'success'
            })
            this.getRoleList()
          }).catch(error => {
            reject(error)
          })
        })
      } else {
        this.$message({
          message: '请选择用户！',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
#addUser {
  .tablewrap {
    padding-left: 20px;
    border-left: 1px solid #e2e3e8;
    position: relative;
    top: -10px;
    padding-top: 20px;
  }
  .search-inner {
    margin-bottom: 10px;
    .search-inner-item {
      margin-bottom: 10px;
      .item-label {
        margin-bottom: 10px;
      }
    }
    .span {
      overflow: hidden;
      display: inline-block;
    }
    .btn-container-title-select {
      display: inline-block;
      width: 744px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include font-color($mainColor);
    }
  }
  .selectUser {
    padding: 0;
    margin-top: 30px;
    height: 355px;
    overflow: auto;
    list-style: none;
    li {
      padding: 5px 8px;
      margin: 0;
      float: left;
      list-style: none;
      font-size: 14px;
      @include font-color($mainColor);
      @include border-color(1px, solid, $mainColor);
      border-radius: 5px;
      margin-left: 8px;
      margin-bottom: 8px;
    }
  }
}
</style>
